<template>
  <div class="info">
    <image class="avatar" src="../../static/icon/易.png" mode="aspectFit "></image>
    <div class="name">
      <div class="nickName">青芒灬</div>
      <div class="level">普通会员</div>
    </div>
  </div>
  <image class="bgc" src="../../static/image/homebgc.png" mode="Fix"></image>

  <view class="myAsset">
    <h2 class="title">我的资产</h2>
    <div class="assetList">
      <div class="assetItem">
        <div class="assetCount">
          <span class="unit">¥0</span>
          <p class="assetName">余额</p>
        </div>
      </div>
      <div class="assetItem">
        <div class="assetCount">
          <span class="unit">0</span>
          <p class="assetName">红包</p>
        </div>
      </div>
      <div class="assetItem">
        <div class="assetCount">
          <span class="unit">0</span>
          <p class="assetName">优惠券</p>
        </div>
      </div>
      <div class="assetItem">
        <div class="assetCount">
          <span class="unit">0</span>
          <p class="assetName">积分</p>
        </div>
      </div>
      <div class="assetItem">
        <div class="assetCount">
          <span class="unit">0</span>
          <p class="assetName">礼品卡</p>
        </div>
      </div>
    </div>
  </view> 
  <ul class="list">
    <li class="item">
      <a href="" title="我的订单">
        <van-icon name="user-o" />
      </a>
    </li>
  </ul>
</template>

<script setup>

</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>
<style scoped>
.bgc {
  width: 100%;
  height: 270rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -111;
}

.info {
  height: 270rpx;
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx 0rpx;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
}

.nickName,
.level {
  margin: 20rpx 10rpx;
}

.myAsset {
  background-color: #fff;
  padding: 30rpx 30rpx 0rpx;
}

.title {
  height: 40rpx;
  line-height: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: .01rem solid #d9d9d9;
}

.assetList {
  display: flex;
}

.assetItem {
  width: 140rpx;
  height: 160rpx;
  padding-top: 45rpx;
}

.assetCount {
  text-align: center;
}

.unit {
  font-weight: bold;
}

.assetName {
  padding: 10rpx 0rpx 5rpx;
}
</style>